<template>
	<view class="page succ">
		<!-- <view class="pay-price">
			<view class="icon">
				<image src="/static/pay_success.png" mode=""></image>
			</view>
			<view class="price-data">
				<view class="list">
					<view class="title">支付方式</view>
					<view class="content">：微信支付</view>
				</view>
				<view class="list">
					<view class="title">支付金额</view>
					<view class="content">：￥299.00</view>
				</view>
			</view>
		</view> -->
		<view class="content">
			<view class="icon">
				<image src="/static/img/qb-i1.png" class="ico" mode=""></image>
				<view class="hd">支付成功</view>
				<!-- <view class="desc">正在确认订单，确认结果将发送至联系人手机</view> -->
			</view>
			<view class="know-btn flex-box">
				<view class="btn1" @click="onSkip(1)">返回首页</view>
				<view class="btn2" @click="onSkip(0)">查看订单</view>
			</view>
			<!-- <view class="td flex-box"><image src="@/static/ico/qb-i2.png" class="ico" mode=""></image>热门推荐</view> -->
		</view>
		<u-popup :show="showCond" bgColor="transparent" mode="center"  @close="close" @open="open">
			<view class="content" :style="{backgroundImage:`url(${comm_img_url+'/pro/tc-bg.png'})`,backgroundSize: '100% 100%'}">
				<view class="bttom-text">
					<view class="text">免费获得 <text>4</text>次 <br>中胚层深度护理服务</view>
					<image class="btn-img" @click="toService" src="/static/tc-btn1.png" mode=""></image>
				</view>
				<view class="close-btn"  @click="showCond=false">
					<u-icon  name="close-circle" size="28" color="#fff"></u-icon>
				</view>
			</view>
			
		</u-popup>
		<!-- 跳转按钮 -->
<!-- 		<view class="skip-btn">
			<view class="btn" @click="onSkip(0)">我的订单</view>
			<view class="btn" @click="onSkip(1)">返回首页</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				comm_img_url:'',
				goodsList:[
				  {
					id: 1,
					name: 'BANDALY 2020夏季女装连衣裙韩版大码宽松显瘦套装裙子两件套 JX19301 上豆绿下米白 M ',
					price: '219.00',
					vip_price: '129.00',
					img: '/static/img/goods_thumb_01.png',
					is_goods: 0,
				  },
				],
				showCond:false
			}
		},
		onLoad(option) {
			this.comm_img_url = this.$c.appImg
			if(option.item==2){
				this.showCond = true
			}else{
				this.showCond = false
			}
		},
		methods: {
			toService(){
				uni.navigateTo({url:'/pages/sub/Services/Services'})
			},
			 open() {
			        // console.log('open');
			  },
			  close() {
				this.showCond = false
				// console.log('close');
			  },
			/**
			 * @param {Number} type 0 订单 1 首页
			 */
			onSkip(type){
				switch(type){
					case 0:
						uni.redirectTo({
							url: '/pages/MyOrderList/MyOrderList'
						})
						break;
					case 1:
						uni.switchTab({
							url: '/pages/home/home'
						})
						break;
				}
			}
		}
	}
</script>

<!-- <style scoped lang="scss">
	@import 'PayResult.scss';
</style> -->
<style lang="scss">
	page{
		background-color: #f6f7fb;
		.content{
			width:750rpx;
			height:789rpx;
			position:relative;
			.close-btn{
				position:absolute;
				bottom:0;
				left:50%;
				transform: translateX(-50%);
			}
			.bttom-text{
				position:absolute;
				bottom:100rpx;
				left:0;
				text-align: center;
				width:100%;
				.text{
					color:#6768a6;
					font-size:30rpx;
					display: block;
					width:450rpx;
					margin:0 auto;
					padding:30rpx 40rpx;
					line-height:1.4;
					text{
						color:#9054f5;
						font-size:40rpx;
					}
				}
				.btn-img{
					width:298rpx;
					height:91rpx;
					display:block;
					margin:0 auto;
				}
			}
		}
		.succ{
			.content{
				.list{
					flex-wrap: wrap;
					padding:20rpx 10rpx;
					padding-top:10rpx;
					.li{
						margin-top:20rpx;
						width:50%;
						justify-content: center;
						
						.img{
							width:340rpx;
							height:200rpx;
							border-radius: 10rpx;
							margin:0 auto;
							display: block;
						}
					}
				}
				.icon{
					padding:50rpx 50rpx;
					
					text-align: center;
					width:480rpx;
					margin:0 auto;
					.ico{
						width:236rpx;
						height:254rpx;
					}
					.hd{
						font-size:40rpx;
						margin:20rpx 0;
					}
					.desc{
						color:#9da4b5;
						font-size:30rpx;
					}
				}
				.know-btn{
					width:600rpx;
					justify-content: space-between;
					text-align: center;
					font-size:26rpx;
					font-weight: bold;
					margin:20rpx auto;
					margin-top:0;
					color:#fff;
					.btn1{
						width:245rpx;
						height:70rpx;
						line-height: 70rpx;
						border-radius: 35rpx;	
						background-color: #eaeaea;
						color:#000;
					}
					.btn2{
						width:245rpx;
						height:70rpx;
						line-height: 70rpx;
						border-radius: 35rpx;
						background-color: #d0abf4;
					}
				}
				.td{
					text-align: center;
					justify-content: center;
					margin-top:30rpx;
					.ico{
						width:45rpx;
						height:45rpx;
						margin-right:10rpx;
					}
				}
			}
		}
	}
</style>
